<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<script src="js/vue.js"></script>
	<body>
		<div id="app">
			<div v-if="goods.length>0">
				<table border="" cellspacing="" cellpadding="">
					<button @click="zengjia()">添加</button>
					<tr>
						<th>id</th>
						<th>商品名称</th>
						<th>商品价格</th>
						<th>商品数量</th>
						<th>操作</th>
					</tr>
					<tr v-for="(item,index) in goods">
						<td>{{item.id}}</td>
						<td>{{item.name}}</td>
						<td>{{item.price}}</td>
						<td><button @click="reduce(index)" :disabled="item.count<=1">-</button>
						{{item.count}}<button @click="add(index)" type="button">+</button></td>
						<td><button @click="remove(index)">移除</button></td>
					</tr>
					<tr v-if="addhang">
						<td><input v-model="id" type="text"></td>
						<td><input v-model="name" type="text"></td>
						<td><input v-model="price" type="text"></td>
						<td><button @click="reduce(index)" :disabled="count<=1">-</button>
						<input v-model="count" type="text">
						<button @click="add(index)" type="button">+</button>
						</td>
						<td><button @click="addobj()">确定</button></td>
					</tr>
				</table>
			</div>
			<div v-else>
				<h3>购物车为空</h3>
			</div>
			
			<h3>总价格：￥{{total}}</h3>
		</div>
	</body>
	<script>
		var app = new Vue({
			el:"#app",
			data:{
				goods:[
					{id:1,name:'电风扇',price:99.11,count:1},
					{id:2,name:'充电宝',price:88.22,count:1},
					{id:3,name:'蓝牙耳机',price:315.34,count:1},
					{id:4,name:'小音箱',price:125.53,count:1}
				],
				id:"",
				name:"",
				price:"",
				count:"",
				addhang:false	
				
			},
			methods: {
				add(index){
					this.goods[index].count++;
				},
				reduce(index){
					this.goods[index].count--;
				},
				zengjia(){
					this.addhang = true;
				},
				addobj(){
					var goodsObj = {id:this.id,name:this.name,price:this.price,count:this.count}
					this.goods.push(goodsObj);
					this.addhang = false;
				},
				remove(index){
					this.goods.splice(index,1)
				}
			},
			computed: {
				total() {
					var total = 0;
					for (var i = 0;i<this.goods.length;i++) {
						total+=this.goods[i].count*this.goods[i].price
					}
					return total.toFixed(2);
				}
			},
			watch: {
		
			}
		})
	</script>
</html>